<template>
  <div class="map-container">
    <TdtMap
      class="map-view"
      :center="center"
      :zoom="zoom"
      @init="handleMapInit"
    ></TdtMap>

    <div class="map-toolbar" v-if="mapLoaded">
      <div class="toolbar-info">
        <span>地图加载完成</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { TdtMap } from 'vue-tianditu'
import mapConfig from '../map/config'

const mapInstance = ref(null)
const mapLoaded = ref(false)

const startExtent = mapConfig.startExtent || [113.2, 23.0, 113.4, 23.2]
const centerLon = (startExtent[0] + startExtent[2]) / 2
const centerLat = (startExtent[1] + startExtent[3]) / 2

const center = ref([centerLon, centerLat])
const zoom = ref(mapConfig.zoom || 12)

const handleMapInit = (map) => {
  // 避免重复初始化导致多次请求
  if (mapInstance.value) {
    return
  }
  mapInstance.value = map
  mapLoaded.value = true
}

defineExpose({
  mapInstance,
  getMap: () => mapInstance.value,
})
</script>

<style scoped>
/* 地图容器样式 */
.map-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 400px;
  min-height: 400px;
  overflow: hidden;
}

/* 地图视图样式 */
.map-view {
  width: 100%;
  height: 100%;
  min-width: 400px;
  min-height: 400px;
  margin: 0;
  padding: 0;
  display: block;
}

/* 地图工具栏样式（可选） */
.map-toolbar {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.9);
  padding: 8px 12px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toolbar-info {
  font-size: 12px;
  color: #333;
}
</style>

